<template>
	<view class="container">
		<view class="nddcont">
			<view class="ndd_box">
				<view class="myorder_dl">
					<view class="myorder_dt">
						<image :src="row.image" mode="aspectFill"></image>
					</view>
					<view class="myorder_dd">
						<view class="myorder_protitle">{{row.name}}</view>
						<view class="myorder_progg"></view>
						<view class="myorder_price"><text>{{row.point}}</text>积分</view>
					</view>
				</view>
			</view>
		</view>
		<view class="mapform">
			<view class="mapform_dl">
				<view class="mapform_dt">收货人</view>
				<view class="mapform_dd"><input class="inp" type="text" @input="iname" placeholder="请输入姓名" /></view>
			</view>
			<view class="mapform_dl">
				<view class="mapform_dt">手机号码</view>
				<view class="mapform_dd"><input class="inp" type="text" @input="imobile" placeholder="请输入手机号" /></view>
			</view>
			<view class="mapform_dl">
				<view class="mapform_dt">所在地区</view>
				<view class="mapform_dd">
					<view class="picker" @tap="openPicker">
						<input placeholder="请选择省市区" disabled type="text" v-model="addressData.address" />
						<text></text>
					</view>
				</view>
			</view>
			<view class="mapform_dl">
				<view class="mapform_dt">详细地址</view>
				<view class="mapform_dd">
					<textarea class="textareainp" @input="iaddress" placeholder="具体到街道、楼牌号信息等详细地址"></textarea>
				</view>
			</view>
		</view>
		<view class="nddcont">
			<view class="ndd_title">备注</view>
			<textarea class="bztextarea" @input="ibeizhu" placeholder="请输入备注信息"></textarea>
		</view>
		<view class="cart_bottom">
			<view class="cart_botl">合计：<view class="cart_botprice"><text>{{row.point}}积分</text></view>
			</view>
			<view class="cart_botbtn" @click="duihuan">
				确认兑换
			</view>
		</view>
		<!-- 省市区选择 province city area初始省市区设置 show:是否显示  @changeClick：更改省市区事件 @sureSelectArea：确认事件 @hideShow：隐藏事件-->
		<cc-selectDity :province="province" :city="city" :area="area" :show="show" @changeClick="changeClick"
			@sureSelectArea="onsetCity" @hideShow="onhideShow"></cc-selectDity>
	</view>
</template>

<script>
	import API from "@/common/api.js";
	export default {
		data() {
			return {
				colors: '#f23a3a',
				show: false,
				province: "广东省",
				city: "广州市",
				area: "天河区",
				addressData: {
					name: '',
					phone: '',
					address: '',
					moreAddres: '',
					isdefult: 0
				},
				isShow: true,
				row: [],
				name: "",
				mobile: "",
				address: "",
				beizhu: "",
				issend: true
			}
		},
		onLoad(options) {
			var $this = this
			API.post("product/pointprddetail", {
				id: options.id
			}).then((res) => {
				if (res.code == 1) {
					$this.row = res.data
				}
			})
		},
		methods: {
			duihuan() {
				if (!this.name) {
					API.showToast("请输入姓名")
				} else if (!(/^1[3456789]\d{9}$/.test(this.mobile))) {
					API.showToast("请输入手机号")
				} else if (!this.addressData.address) {
					API.showToast("请选择省市区")
				} else if (!this.address) {
					API.showToast("请输入详细地址")
				} else {
					var json = {
						id: this.row.id,
						name: this.name,
						mobile: this.mobile,
						address: this.addressData.address + this.address,
						beizhu: this.beizhu,
					}
					var $this = this
					if (this.issend) {
						this.issend = false
						API.post("product/exchange", json).then((res) => {
							if (res.code == 1) {
								API.showModal(res.msg, "/pages/user/user")
							} else {
								$this.issend = true
								API.showModal(res.msg)
							}
						})
					}

				}
			},
			ibeizhu(e) {
				this.beizhu = e.detail.value
			},
			iaddress(e) {
				this.address = e.detail.value
			},
			imobile(e) {
				this.mobile = e.detail.value
			},
			iname(e) {
				this.name = e.detail.value
			},
			openPicker() {
				console.log('执行打开地址选择器')
				this.show = true
			},

			changeClick(value, value2, value3) {

				console.log('地址选择器 = ' + value + value2 + value3);

				this.province = value;
				this.city = value2;
				this.area = value3;

			},
			onhideShow() {
				this.show = false
				console.log('执行了关闭地址选择器')
			},
			//选中省市区
			onsetCity(e) {
				let data = e.detail.target.dataset;
				let address = data.province + data.city + data.area;
				this.show = false
				this.addressData.address = address
			},


		}
	}
</script>

<style lang="scss">
	page {
		background: #f7f7f7;
	}

	.container {
		padding-bottom: 100rpx;
	}

	.nddcont {
		margin: 0 0 26rpx;
		background: #fff;
		padding: 30rpx;
	}

	.ndd_title {
		font-size: 30rpx;
		padding-bottom: 24rpx;
		font-weight: bold;
	}

	.myorder_dl {
		width: 100%;
		display: flex;
	}

	.myorder_dt {
		width: 158rpx;
		height: 158rpx;
		border-radius: 10rpx;
		float: left;
		overflow: hidden;
		position: relative;
	}

	.myorder_dt image {
		width: 100%;
		height: 100%;
	}

	.myorder_dd {
		flex: 1;
		padding: 0 24rpx;
	}

	.myorder_protitle {
		line-height: 40rpx;
		height: 40rpx;
		overflow: hidden;
		color: #333;
		font-size: 30rpx;
		width: 100%;
	}

	.myorder_progg {
		margin-top: 10rpx;
		color: #999;
	}

	.myorder_progg text {
		margin-right: 10rpx;
		border: 2rpx #eee solid;
		padding: 0 10rpx;
		display: inline-block;
		border-radius: 4rpx;
	}

	.myorder_price {
		color: #333;
		font-weight: bold;
		margin-top: 24rpx;
	}

	.myorder_price text {
		font-size: 32rpx;
	}

	.myorder_num {
		color: #666;
	}

	.ndd_bot {
		font-size: 28rpx;
		border-top: 2rpx #eee solid;
		padding-top: 30rpx;
		font-weight: bold;
		text-align: right;
	}

	.ndd_bot text {
		font-weight: bold;
		font-size: 36rpx;
	}

	.bztextarea {
		width: 100%;
		height: 140rpx;
		font-size: 26rpx;
		color: #333;
	}

	.cart_bottom {
		position: fixed;
		left: 0;
		bottom: 0;
		right: 0;
		background: #fff;
		height: 100rpx;
		display: flex;
		padding: 30rpx;
		align-items: center;
	}

	.cart_botl {
		flex: 1;
		font-size: 28rpx;
		font-weight: bold;
	}

	.cart_botprice {
		display: inline-block;
		color: #f85b18;
		padding: 0 4rpx;
	}

	.cart_botprice text {
		font-size: 36rpx;
		font-weight: bold;
	}

	.cart_botbtn {
		width: 50%;
		text-align: center;
		color: #fff;
		background: $color;
		font-size: 36rpx;
		line-height: 100rpx;
		border-radius: 100rpx;
		font-weight: bold;
	}

	.textareainp {
		width: 100%;
		height: 92rpx;
		line-height: 46rpx;
		border: 0 none;
		padding: 20rpx 0;
		margin: 0;
		font-size: 28rpx;
	}

	.mapform_dd .picker::after {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

	.mapform_dd .picker text {
		width: 0;
		height: 0;
		border: 12rpx solid;
		border-color: transparent transparent transparent #333;
		position: absolute;
		top: 50%;
		right: 0;
		transform: translateY(-50%);
	}

	.mapform_dd .picker text::after {
		content: '';
		position: absolute;
		top: -12rpx;
		left: -14rpx;
		border: 12rpx solid;
		border-color: transparent transparent transparent #fff;
	}

	.mapform_dd .picker input {
		width: 100%;
		height: 100rpx;
		line-height: 100rpx;
	}
</style>